<template>
	<view class="body">
		<swiper-tab-head
		:tabIndex='tabIndex' 
		:tabs='tabBar'
		scrollItemStyle='width: 33.33%'
		srcollStyle='border-bottom: 0'
		@tab-click='handleTabItemClick' />
		
		<!-- 好友列表 -->
		<!-- <block  v-for="(item, index) in list" :key='index'>
		</block> -->
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :current='tabIndex' @change="handleSwiperChange"
				:style="{'height': swiperHeight + 'px'}">
							<swiper-item v-for="(items, index) in newsList" :key='index'>
								<scroll-view scroll-y class="list" @scrolltolower="handleScrolltolower(items)">
									<template v-if="items.list.length">
										<!-- 图文列表 -->
										<block v-for="(item, index1) in items.list" :key='index1'>
											<user-list :item="item" :index="index"></user-list>
										</block>
										<!-- 上拉加载更多 -->
										<load-more :loadtext='items.loadtext' />
									</template>
							
									<!-- 无内容默认 -->
									<template v-else>
										<no-thing />
									</template>
								</scroll-view>
							</swiper-item>
			</swiper>
		</view>
		
	</view>
</template>

<script>
	import SwiperTabHead from '../../components/index/swiper-tab-head.vue'
	import UserList from '../../components/user-list/user-list.vue'
	import LoadMore from '../../components/common/load-more.vue'
	export default {
		components:{
			SwiperTabHead,UserList,LoadMore
		},
		data() {
			return {
				tabIndex: 0,
				swiperHeight: 500,
				tabBar: [
					{
						name: "互关",
						id: "huguan",
						num: 20
					},
					{
						name: "关注",
						id: "guanzhu",
						num: 30
					},
					{
						name: "粉丝",
						id: "fensi",
						num: 40
					}
				],
				newsList: [
					{
						loadtext: '上拉加载更多',
						list:[
							{
								userpic: "/static/demo/userpic/10.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isguanzhu: false
							},
							{
								userpic: "/static/demo/userpic/10.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isguanzhu: false
							},
							{
								userpic: "/static/demo/userpic/10.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isguanzhu: false
							},
							{
								userpic: "/static/demo/userpic/10.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isguanzhu: false
							},
							{
								userpic: "/static/demo/userpic/10.jpg",
								username: "昵称",
								age: 20,
								sex: 1,
								isguanzhu: true
							},
							{
								userpic: "/static/demo/userpic/10.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isguanzhu: true
							},
							{
								userpic: "/static/demo/userpic/10.jpg",
								username: "昵称",
								age: 20,
								sex: 1,
								isguanzhu: false
							},
						]
					},
					{
						loadtext: '上拉加载更多',
						list: [
							{
								userpic: "/static/demo/userpic/10.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isguanzhu: true
							},
							{
								userpic: "/static/demo/userpic/10.jpg",
								username: "昵称",
								age: 20,
								sex: 1,
								isguanzhu: false
							},
							{
								userpic: "/static/demo/userpic/10.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isguanzhu: true
							},
							{
								userpic: "/static/demo/userpic/10.jpg",
								username: "昵称",
								age: 20,
								sex: 1,
								isguanzhu: false
							},
						]
					},
					{
						loadtext: '上拉加载更多',
						list: [
							{
								userpic: "/static/demo/userpic/10.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isguanzhu: false
							},
							{
								userpic: "/static/demo/userpic/10.jpg",
								username: "昵称",
								age: 20,
								sex: 1,
								isguanzhu: true
							},
							{
								userpic: "/static/demo/userpic/10.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isguanzhu: true
							},
							{
								userpic: "/static/demo/userpic/10.jpg",
								username: "昵称",
								age: 20,
								sex: 1,
								isguanzhu: true
							},
						]
					}
				]
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100)
					this.windowWidth = res.windowHeight
					this.swiperHeight = height
				}
			})
		},
		onReady() {
			// #ifdef H5
				var a = document.getElementsByClassName('uni-page-head-hd')[0]
				a.style.display = 'none';
			// #endif
		},
		onNavigationBarButtonTap(e) {
			if(e.index == 0) {
				uni.navigateBack({
					delta:1
				})
			}
		},
		methods: {
			// 点击tab项(index下标)
			handleTabItemClick(index) {
				this.tabIndex = index
			},
			// 轮播图变化(获取index)
			handleSwiperChange(e) {
				this.tabIndex = e.detail.current
			},
			// 上拉加载更多
			handleScrolltolower(row) {
				if (row.loadtext != '上拉加载更多') return
				row.loadtext = '正在加载中.....'
			
				setTimeout(() => {
					row.list = row.list.concat(...row.list)
					row.loadtext = '上拉加载更多'
				}, 1000)
			}
		}
	}
</script>

<style scoped>
	.body {
		/* padding: 0 20upx; */
	}

</style>
